<template>
	<view class="content">
		<view class="search-block">
			<view class="input-block">
				<view class="iconfont icon-sousuo" @click="getList"></view>
				<input placeholder="请输入搜索关键字" v-model="name" @confirm="search" placeholder-style="color:#0059FC;" />
			</view>
		</view>
		<view class="tips" style="background-color: #C5E0FB;">
			<view class="text">您的搜索关键字为 "<text class="total">{{name}}</text>" </view>
			<view class="text">共搜索出{{total}}条包含 <text>"</text><text class="total">{{name}}</text>" 关键字的数据。</view>
		</view>
		<view class="info-block" v-if="matterList.length>0">
			<view class="name">书记督</view>
			<view class="info-list" v-for="(item,index) in matterList" :key="item.id"
				@click="navigate('/pages/search-list/superviso-detail?id='+item.id)">
				<view class="title">{{index+1}}、{{item.matterName}}</view>
			</view>
		</view>
		<view class="info-block" v-if="exposureList.length>0">
			<view class="name">通报曝光</view>
			<view class="info-list" v-for="(item,index) in exposureList" :key="item.id"
				@click="navigate('/pages/policy/detail?id='+item.id)">
				<view class="title">{{index+1}}、{{item.exposureTitle}}</view>
			</view>
		</view>
		<view class="info-block" v-if="keyWorkList.length>0">
			<view class="name">重点工作任务</view>
			<view class="info-list" v-for="(item,index) in keyWorkList" :key="item.id"
				@click="navigate('/pages/search-list/work-detail?id='+item.id+'&departmentId='+item.departmentId)">
				<view class="title" v-if="item.task">{{index+1}}、{{item.task}}</view>
				<view class="title" v-if="item.departmentText">{{index+1}}、{{item.departmentText}}</view>
			</view>
		</view>
		<view class="info-block" v-if="projectList.length>0">
			<view class="name">重点投资项目</view>
			<view class="info-list" v-for="(item,index) in projectList" :key="item.id"
				@click="navigate('/pages/search-list/project-detail?id='+item.id)">
				<view class="title">{{index+1}}、{{item.name}}</view>
			</view>
		</view>
		<view class="info-block" v-if="fundsList.length>0">
			<view class="name">争取资金</view>
			<view class="info-list" v-for="(item,index) in fundsList" :key="item.id"
				@click="navigate('/pages/search-list/fund-detail?id='+item.departmentId)">
				<view class="title">{{index+1}}、{{item.departmentText}}</view>
			</view>
		</view>
		<view class="info-block" v-if="businessList.length>0">
			<view class="name">招商引资</view>
			<view class="info-list" v-for="(item,index) in businessList" :key="item.id"
				@click="navigate('/pages/search-list/business-detail?id='+item.departmentId)">
				<view class="title">{{index+1}}、{{item.departmentText}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSearchListApi
	} from '@/api/home.js'
	export default {
		data() {
			return {
				name: '',
				total: 0,
				matterList: [],
				keyWorkList: [],
				businessList: [],
				projectList: [],
				fundsList: [],
				exposureList: []
			}
		},
		methods: {
			search() {
				this.getList()
			},
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getSearchListApi({
					keyword: this.name
				}).then(data => {
					uni.hideLoading()
					this.matterList = data.matterList;
					this.keyWorkList = data.keyWorkList;
					this.businessList = data.businessList;
					this.projectList = data.projectList;
					this.fundsList = data.fundsList;
					this.exposureList = data.exposureList;
					this.total = data.count;
				}).catch(() => {
					uni.hideLoading()
				})
			},
		},
		onLoad(e) {
			this.name = e.keyWord
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		padding: 30rpx;

		.search-block {
			position: relative;
			width: 100%;
			height: 60rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 30rpx 0;

			.input-block {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				border: 1px solid #0059FC;
				border-radius: 40rpx;
				padding: 0 10rpx;
				height: 70rpx;

				.iconfont {
					flex-grow: 0;
					color: #0059FC;
					margin: 0 10rpx;
					font-weight: bold;
				}

				input {
					flex-grow: 1;
					font-size: 28rpx;
					color: #0059FC;
					margin: 0 10rpx;
				}
			}
		}

		.tips {
			display: flex;
			flex-direction: column;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			padding: 30rpx;

			.text {
				font-size: 30rpx;
				line-height: 50rpx;
				color: #404141;

				.total {
					color: #1152F7;
				}
			}
		}

		.info-block {
			background: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
			box-shadow: 0 0 10px 0 #dedede;
			display: flex;
			flex-direction: column;
			margin-bottom: 30rpx;

			.name {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.info-list {
				display: flex;
				flex-direction: column;
				background-color: #F8F8F8;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				padding: 30rpx 20rpx;

				.title {
					font-size: 30rpx;
					line-height: 50rpx;
				}
			}
		}
	}
</style>